<template>
  <section class="component z-tree-component text-left">
    <z-tree-node ref="node" v-for="node in data" :data.sync="node" :key="node.id"></z-tree-node>
  </section>
</template>
<script>
import ZTreeNode from '/imports/components/common/z-tree-node'
export default {
  name: 'z-tree',
  componentName: 'z-tree',
  data () {
    return {
      selected: null
    }
  },
  props: {
    data: {
      type: Array,
      default: []
    },
    props: Object
  },
  computed: {
  },
  methods: {
    setSelected (selected) {
      if (this.selected === selected) {
        return
      }

      let func = (items) => {
        items.forEach(x => {
          if (x.data !== selected && x.selected) {
            x.selected = false
          }

          func(x.$children)
        })
      }
      func(this.$refs.node)

      this.selected = selected
      this.$emit('change', selected._id)
    },
    refresh () {

    }
  },
  mounted () {
    this.refresh()
  },
  components: {
    ZTreeNode
  }
}
</script>
<style lang="less" scoped>
  .z-tree-component{
    padding:0 10px;
  }
</style>
